



import React, { useEffect, useState } from 'react';

class ChantApi{
  constructor(){
    this.lister={}
  }

  open(id,calback){
    if(!this.lister[id]){
      this.lister[id]=[]
    }
    this.lister[id].push(calback)

    console.log('open我出发了')
  }

  unopen(id,calback){
    var index = this.lister[id].indexOf(calback);
    this.lister[id].splice(index,1)
  }


  puash(staticc){
   
    Object.keys(this.lister).forEach((id) => {
      const lister_arr=this.lister[id]
 lister_arr.forEach((calback) => {
  calback(staticc)
 });
    })
 
  }
}
const chat = new ChantApi()

setTimeout(() => {
  chat.puash('Offline')
}, 1000);

setTimeout(() => {  chat.puash('Online')
}, 2000);

function  FriendStatus(props) {

  const isOnline=useOnlineStatus(props.id)
  
  if(isOnline === null){
    return 'Loading...'
  } 

   return isOnline

}

function ColorFriend(props){
  const isOnline=useOnlineStatus(props.id)

  return(
    <div style={{color:isOnline === 'Online' ? 'green' : 'red'}}>
      我是大师哥
    </div>
  )
}

// 通用逻辑
function useOnlineStatus(id){
  const [isOnline,setIsOnline] =useState(null)
  function handleStatusChange(status){
    console.log('handleStatusChange',status)
    setIsOnline(status);
  }
  useEffect(() => {
    console.log('useEffect')
    chat.open(id,handleStatusChange);
    return () => {
      chat.unopen(id,handleStatusChange);
    };
  })

  return isOnline
}

function App(){
  return(
    <>
    <FriendStatus id={1}/>
  <ColorFriend id={1} />
    </>
  )
  
}

export default App;





// import React from "react";
// import { useState, useEffect } from "react";


// // 先写 一个发放删除邮局
// class ChatAPI {
//   constructor() {
//     this.lister = {}
//   }

//   // 订阅
//   open(id, calback) {
//     if (!this.lister[id]) {
//       this.lister[id] = []
//     }
//     this.lister[id].push(calback)
//   }
//   // 取消订阅
//   unopen(id, calback) {
//     var index = this.lister[id].indexOf(calback);
//     this.lister[id].splice(index, 1)
//   }

//   // 发布
//   puash(ooko) {
//     Object.keys(this.lister).forEach((id) => {
//       const listener_arr = this.lister[id]
//       listener_arr.forEach((calback) => {
//         calback(ooko)
//       })
//     })
//   }

// }

// const Chat = new ChatAPI()
// setTimeout(() => {
//   Chat.puash('on')
// }, 1000);
// setTimeout(() => {
//   Chat.puash('off')
// }, 2000);
// // 公用hooks组件
// function useSubmit(id) {
//   const [isOnline, setOnline] = useState(null)

//   function handblack(status) {
//     setOnline(status)
//   }
//   useEffect(() => {


//     Chat.open(id, handblack)

//     return () => {
//       Chat.unopen(id, handblack)
//     };

//   })
//   return isOnline

// }
// function Zhuangtai(props) {
//   const isOnline = useSubmit(props.id)

//   if (isOnline === null) {
//     return 'Loding...'
//   }
//   return isOnline
// }
// function ColorFun(props) {
//   const isOnline = useSubmit(props.id)

//   return (
//     <div style={{ color: isOnline === 'off' ? 'green' : 'red' }}>我是大师哥</div>
//   )
// }

// function App() {
//   return (
//     <>
//       <Zhuangtai id={1} />
//       <ColorFun id={1} />
//     </>
//   )
// }
// export default App